<template>
  <view class="charts-box">
 <!--   <qiun-data-charts 
      type="line"
      :opts="{...opts,yAxis:yAxis,color:color}"
      :chartData="chartData"
    /> -->
	<canvas canvas-id="column" id="column" class="charts" />
  </view>
</template>

<script>
	import uCharts from '@/common/charts.js';
export default {
	props:{
		chartData: {
			type: Object,
			default:()=>{} 
		},	
		yAxis: {
			type: Object,
			default:()=>{
				return {
						  gridType: "dash",
						  dashLength: 2
						}
				
			} 
		},
		color: {
			type: Array,
			default:()=>["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"]
		},
	},
	created(){
		const ctx = uni.createCanvasContext("column", this);
		let charts = new uCharts({
			padding: [15,10,0,15],
			enableScroll: false,
			legend: {show:false},
			xAxis: {
			  disableGrid: true,
			  // boundaryGap: "justify"
			},
			extra: {
			  line: {
			    type: "straight",
			    width: 2,
			    activeType: "hollow"
			  }
			},
			yAxis:this.yAxis,
			color:this.color,
			 width: 300,
			height: 300,
			categories: this.chartData.categories,
			series: this.chartData.series,
		});

	},
  data() {
    return {
       opts: {
       
      }
    };
  },

  methods: {
   
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 100%;
    height: 300rpx;
  	padding:20rpx 0;
  }
</style>